<template>
  <div class="interview4-wrap">
      <main>
        <div class="title">面试经验</div>
        <ul>
          <li v-for="(interview,index) in interviewData" :key="index">
            <p class="interviewName">{{interview.interview}}</p>
            <p>{{interview.time}}</p>
          </li>
        </ul>
      </main>
  </div>
</template>

<script setup lang="ts">
const interviewData = ref([
  {
    "interview": "腾讯面试",
    "time": "2023-08-13 17:08:33"
  },
  {
    "interview": "百度面试",
    "time": "2023-10-27 08:11:36"
  },
  {
    "interview": "Inter面试",
    "time": "2023-02-12 18:52:19"
  },
  {
    "interview": "阿里巴巴面试",
    "time": "2023-08-19 16:30:39"
  },
  {
    "interview": "字节面试",
    "time": "2023-09-09 10:15:08"
  },
  {
    "interview": "长鑫面试",
    "time": "2023-12-17 10:12:36"
  },
])
</script>

<style scoped>
.interview4-wrap {
  width: 100%;
  padding: 20px;
  position: relative;
}

main{
  /* position: sticky; */
  /* top: 0; */
  width: 80%;
  height: 100%;
  box-shadow: var(--boxShadow);
  border-radius: 12px;
  padding: 10px;
}

main .title{
  font-size: 16px;
  margin-bottom: 20px;
}

main ul li{
  margin-bottom: 20px;
  font-size: 14px;
  padding: 5px;
}

main ul li p{
  font-size: 12px;
  color: #666;
}

main ul li .interviewName{
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 550;
  color: rgb(68, 67, 67);
}

main ul li:hover{
  cursor: pointer;
  background-color: #dbdbdb;
  border-radius: 12px;
}

</style>